<!doctype html>

<!-- $Id: effects.html 35 2012-11-30 07:05:44Z azbitnev@gmail.com $ -->

<html>
<head>

<title>effects</title>

<link href="960c12.css" rel="stylesheet" type="text/css"/> 

<link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.min.css" rel="stylesheet" type="text/css"/> 
<!--[if IE]><link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.ie.min.css" rel="stylesheet" type="text/css"/><![endif]-->

<link href="../release/themes/grey.min.css" rel="stylesheet" type="text/css"/> 

<script src="http://code.jquery.com/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../release/jquery.ys.min.js"></script>

<script>

$(document).ready(function () {


	$('.show-slide-down').click(function () {
		$.ys.effects.showSlideDown('.example', { duration: $('#duration').val() })
	})

	$('.show-slide-up').click(function () {
		$.ys.effects.showSlideUp('.example', { duration: $('#duration').val() })
	})

	$('.show-slide-left').click(function () {
		$.ys.effects.showSlideLeft('.example', { duration: $('#duration').val() })
	})

	$('.show-slide-right').click(function () {
		$.ys.effects.showSlideRight('.example', { duration: $('#duration').val() })
	})


	$('.hide-slide-down').click(function () {
		$.ys.effects.hideSlideDown('.example', { duration: $('#duration').val() })
	})

	$('.hide-slide-up').click(function () {
		$.ys.effects.hideSlideUp('.example', { duration: $('#duration').val() })
	})

	$('.hide-slide-left').click(function () {
		$.ys.effects.hideSlideLeft('.example', { duration: $('#duration').val() })
	})

	$('.hide-slide-right').click(function () {
		$.ys.effects.hideSlideRight('.example', { duration: $('#duration').val() })
	})

	$('.collapsible > a').each(function () {
		var $a = $(this)
		var $p = $a.next()
		$a.click(function () {
			if ($a.hasClass('ys-collapsed')) {
				$.ys.effects.showSlideDown($p.css({ display: 'block' }), {
					callback: function ($c) {
						$a.removeClass('ys-collapsed').addClass('ys-expanded')
					}
				})
			} else {
				$.ys.effects.hideSlideUp($p, {
					callback: function ($c) {
						$a.removeClass('ys-expanded').addClass('ys-collapsed')
						$c.css({ display: 'none' })
					}
				})
			}
		})
	})

})

</script>

<style>

.example {
	display: block;
	overflow: hidden;
}

.collapsible > a {
	display: block;
	width: auto;
	height: auto;
	padding-left: 12px;
	background-position: left center;
}

.collapsible > div {
	overflow: hidden;
	display: none;
}

.fixed-height {
	height: 20em;
}

</style>

</head>
<body>

<div class="container_12 margin-top">

	<div class="grid_6">
		<div class="example shaded margin-left margin-bottom" style="background: #fff;">
			<div><div class="margin">
				<h2>Lorem ipsum dolor sit amet</h2>
				<p>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>		
			</div></div>
		</div>
	</div>

	<div class="grid_6 fixed-height">
		Show:<br/>
		<button class="show-slide-down">slide-down</button>
		<button class="show-slide-up">slide-up</button>
		<button class="show-slide-left">slide-left</button>
		<button class="show-slide-right">slide-right</button>
		<br/>
		<br/>
		Hide:<br/>
		<button class="hide-slide-down">slide-down</button>
		<button class="hide-slide-up">slide-up</button>
		<button class="hide-slide-left">slide-left</button>
		<button class="hide-slide-right">slide-right</button>
		<br/>
		<br/>
		Duration:<br/>
		<select id="duration">
			<option value="slow" selected="yes">slow</option>
			<option value="fast">fast</option>
		</select>
	</div>

	<div class="grid_12">
		<h1>Collapsible</h1>
		<hr/>
		<div class="collapsible">
			<a class="ys-collapsed">Lorem ipsum dolor sit amet</a>
			<div><div><p>Lorem ipsum dolor sit amet, eu sit rebum corrumpit. Ea dicunt pertinax temporibus sea, duis veri eu per, nec malis appetere at. Timeam salutatus ea nam. Cu nec brute deseruisse. Purto wisi porro at nam, nam vide ipsum virtute ut.</p></div></div>
			<a class="ys-collapsed">An ancillae nominati erroribus ius</a>
			<div><div><p>An ancillae nominati erroribus ius, ea petentium intellegam philosophia sea. Mei malis error consequuntur in, mei ne mediocrem percipitur, est ea graecis alienum. Mollis accusamus his ei, no duo utinam impetus. Ut congue repudiandae his, ad sit tempor dolorum intellegebat. Est meliore similique deseruisse cu.</p></div></div>
			<a class="ys-collapsed">Cu usu percipit cotidieque</a>
			<div><div><p>Cu usu percipit cotidieque. Esse dicta cotidieque cum ut, equidem fierent nominati quo cu. Accusata maluisset assentior te quo. Cum errem aperiam praesent te, no dicat numquam vituperatoribus est, habemus erroribus usu ei. Per ad diam dissentias, an inani libris cum, oporteat intellegebat has ex. At ferri simul fuisset qui, tritani equidem gloriatur quo in, cu iudico sanctus his.</p></div></div>
			<a class="ys-collapsed">Ei vim wisi adversarium</a>
			<div><div><p>Ei vim wisi adversarium. Mel no perpetua sapientem suscipiantur. Omnis ornatus insolens pri ut, labores complectitur et qui. Eros verterem mea cu, cu albucius tincidunt elaboraret qui, eum clita nullam graeci cu. Ex homero quaestio prodesset mei.</p></div></div>
			<a class="ys-collapsed">Mea cu audiam offendit conceptam</a>
			<div><div><p>Mea cu audiam offendit conceptam, ut dictas fabulas corpora vim. Probatus sapientem ullamcorper cu qui, in consectetuer necessitatibus vix. Nam noster contentiones deterruisset ad. Cu vim oratio invenire. Scripta recusabo ex sit, sea an zril causae, ad sed vide dignissim repudiandae. Nam eu convenire aliquando, quo id brute mollis. Sed et atqui audire invenire, mutat mentitum molestiae pro id, has purto simul soleat ad.</p></div></div>
		</div>
	</div>

</div>

</body>
</html>